<template>
  <div :class="['art-work-recomm', $ua.isFromPc() ? 'z-web' : 'z-phone']">
    <div class="title">
      <div class="art-work-recomm-title">
        艺术品推荐
      </div>
    </div>
    <div class="art-work-box">
      <div class="art-work-list">
        <div class="content" v-for="(item, index) in workRecommentList" :key="index" @click="goDesc(item.data_id, item.work_type)">
          <div class="img-content">
            <el-image v-if="item?.thumbnail" class="img" :src="item?.thumbnail" alt="" fit="contain">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <p class="tag">
              {{ typeOptions.find((s) => s.data_id == item.type)?.name }}
            </p>
          </div>
          <div class="title">
            {{ item.name }}
          </div>
          <div class="second-title">
            <p class="author">
              {{ item.art_name }}
            </p>
            <p class="quality">
              {{ item.opus_material }}
            </p>
          </div>
          <div class="collect">
            <img src="@/static/img/favorite_grey.png" alt="">
            {{ $ua.isFromPc() ? item.focus_total : '收藏' }}
          </div>
        </div>
        <div @click="lookMore" v-if="!$ua.isFromPc()" class="look-more" v-show="this.workRecommentList.length < this.tablePage.total">
          查看更多
        </div>
      </div>
      <div class="pagination-box" v-if="$ua.isFromPc()">
        <el-pagination
          class="pagination"
          :page-size="tablePage.pageSize"
          :current-page="tablePage.pageNum"
          :total="tablePage.total"
          @current-change="handlePage"
          hide-on-single-page
          background
          prev-text="上一页"
          next-text="下一页"
          layout="prev, pager, next"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getImgUrl } from '@/utils/downloadFile'
export default {
  name: '',
  components: {},
  data () {
    return {
      typeOptions: [],
      workRecommentList: [],
      tablePage: {
        pageNum: 1, // 第几页
        pageSize: 8, // 每页多少条
        total: 0 // 总记录数
      },
    }
  },
  computed: {

  },
  watch: {},
  created () {},
  mounted () {
    this.$api.getProductType({}, {}).then((res) => {
      this.typeOptions = Array.isArray(res.result.item_list) ? res.result.item_list.filter(item => item.parent_id == -1) : []
    });
    const params = {
      page_num: this.tablePage.pageNum,
      page_count: this.tablePage.pageSize
    }
    this.getWorksList(params)
  },
  methods: {
    getImgUrl,
    goDesc(data_id, type) {
      if (type == 1) {
        this.$router.push({ path: '/artwork/desc', query: { data_id } })
      } else if (type == 2) {
        this.$router.push({ path: '/onlineVideo/desc', query: { data_id, type } })
      }
    },
    lookMore() {
      this.tablePage.pageNum++
      const params = {
        page_num: this.tablePage.pageNum,
        page_count: this.tablePage.pageSize
      }
      this.getWorksList(params)
    },
    // 作品推荐
    async getWorksList(params) {
      const res = await this.$api.getWorksList({ ...params, art_id: this.$route.query.id, work_type: 1 })
      if (res.status == '$SUCCESS') {
        if (this.$ua.isFromPc()) {
          this.workRecommentList = Array.isArray(res.result.item_list) ? res.result.item_list : []
        } else {
          this.workRecommentList.push(...res.result.item_list)
        }
        // this.workRecommentList.forEach(item => {
        //   item.img = getImgUrl('works', item.data_id, 'thumbnail')
        // })
        this.tablePage.total = res.result.total_count
        console.log(this.workRecommentList)
      }
    },
    // 翻页
    handlePage(currentPage) {
      this.active = ''
      this.tablePage.pageNum = currentPage
      const params = {
        page_num: this.tablePage.pageNum,
        page_count: this.tablePage.pageSize
      }
      this.getWorksList(params)
    },
  }
}
</script>

<style scoped lang="less">
.art-work-recomm {
  &.z-web {
    padding: 0 276px 100px;
    background: #fff;
    position: relative;

    ::v-deep(.el-pagination.is-background .btn-prev),
    ::v-deep(.el-pagination.is-background .btn-next) {
      border: none;
    }

    .art-work-recomm-title {
      font-size: 44px;
      font-weight: 600;
      color: #000;
      position: absolute;
      left: 173px;
      margin-top: 5px;
    }

    .art-work-box {
      .art-work-list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        min-height: 414px;

        &::after {
          content: '';
          flex: 0 0 330px;
        }

        .content {
          width: 330px;
          height: 414px;
          margin-bottom: 80px;

          &:nth-child(3n) {
            margin-right: 0;
          }
          .img-content {
            width: 100%;
            height: 308px;
            position: relative;

            .img {
              width: 100%;
              height: 100%;
            }

            .tag {
              width: 120px;
              height: 36px;
              position: absolute;
              left: 0;
              bottom: 0;
              background: #F7E6D0;
              display: flex;
              align-items: center;
              justify-content: center;
              line-height: 15px;
              font-size: 16px;
              font-weight: 600;
              color: #000;
            }
          }

          .title {
            margin: 30px 0 16px;
            line-height: 16px;
            font-size: 16px;
            font-weight: 600;
            color: #000;
          }

          .second-title {
            line-height: 16px;
            font-size: 16px;
            font-weight: 600;
            color: #999;
            margin-bottom: 12px;

            p {
              display: inline-block;
            }

            .author {
              margin-right: 10px;
            }
          }

          .collect {
            color: #999;
            font-size: 16px;

            img {
              // width: 30px;
              width: 18px;
              height: 18px;
              position: relative;
              top: -3px;
              margin-right: 5px;
            }
          }
        }
      }

      .pagination-box {
        text-align: center;
      }
    }
  }

  &.z-phone {
    padding: pxtorem(40) pxtorem(24) pxtorem(40);
    .title {
      .art-work-recomm-title {
        writing-mode: lr;
        font-size: pxtorem(36);
        font-weight: 600;
        color: #000;
        // margin-top: pxtorem(32);
        letter-spacing: pxtorem(10);
        margin-bottom: pxtorem(32);
      }
    }

    .art-work-box {
      .art-work-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .content {
          margin-bottom: pxtorem(40);
          .img-content {
            width: pxtorem(340);
            height: pxtorem(254);
            position: relative;

            ::v-deep(.el-image) {
              width: 100%;
              height: 100%;
            }

            .tag {
              position: absolute;
              bottom: 0;
              left: 0;
              width: pxtorem(120);
              height: pxtorem(36);
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: #F7E6D0;
              font-size: pxtorem(18);
              font-weight: 600;
            }
          }

          .title {
            width: pxtorem(340);
            margin-top: pxtorem(16);
            font-size: pxtorem(22);
            font-weight: 600;
            color: #000;
            overflow: hidden; //超出的文本隐藏
            text-overflow: ellipsis; //溢出用省略号显示
            white-space: nowrap;
          }
          .collect,
          .second-title {
            font-size: pxtorem(22);
            font-weight: 600;
            color: #999999;
            .author {
              margin-bottom: pxtorem(10);
            }
          }
        }
      }
    }
  }
}
</style>
